<template>
  <div class="header">

    <div class="header-item header-nav" @mouseover="pathVisible = true" @mouseout="pathVisible = false" :class="pathVisible ? 'header-hover-in' : ''">
      <div class="header-item-select">
        <div class="header-item-select-info">
          <img class="header-bar" src="../../../../static/img/select_icon_bar.png" />
          <span class="label header-select-blue">{{ screenName }}</span>
          <span class="icon"><img src="../../../../static/img/select_icon_hot.png" /></span>
        </div>

        <CollapseTransition>
          <ul class="screen-type-options" v-show="pathVisible">
            <router-link tag="li"
                         :to="item.path"
                         v-for="(item, index) in navOptions" :key="index"
                         :class=" item.label === screenName ? 'header-select-active' : '' ">
              <div class="header-select-info-list">{{ item.label }}</div>
            </router-link>
          </ul>
        </CollapseTransition>
      </div>

    </div>

    <div class="header-item header-city" @mouseover="cityVisible = true" @mouseout="cityVisible = false" :class="cityVisible ? 'header-hover-in' : ''">
      <div class="header-item-select">
        <div class="header-item-select-info">
          <span class="label">{{ cityName }}</span>
          <span class="icon"><img src="../../../../static/img/select_icon.png" /></span>
        </div>

        <CollapseTransition>
          <ul v-show="cityVisible">
            <li v-for="(item, index) in cityOptions" :key="index" @click="bindCity(item)" :class=" item.label === cityName ? 'header-select-active' : '' ">
              <div class="header-select-info-list">{{ item.label }}</div>
            </li>
          </ul>
        </CollapseTransition>
      </div>

    </div>

    <div class="header-item header-map">
      <ul>
        <router-link tag="li"
                     :to="item.path"
                     v-for="(item, index) in mapList"
                     :key="index"
                     active-class="select-map"
                     class="header-map-li">{{ item.label }}</router-link>
      </ul>
    </div>

  </div>
</template>

<script>
  import { CollapseTransition } from '../../../components'
  export default {
    components: { CollapseTransition },
    props: {
      navOptions: {
        type: Array
      },
      cityOptions: {
        type: Array
      },
      mapList: {
        type: Array
      },
      screenName: {
        type: String,
      },
      cityName: {
        type: String,
      }
    },
    data () {
      return {
        pathVisible: false,
        cityVisible: false
      }
    },
    mounted () {},
    methods: {
      bindCity (item) {
        this.$emit('cityChange', item)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import './index.styl';
</style>
